<template>
	<view class="popup-body">
    <view v-show="visible" :class="'popup-mask ' + (mask ? 'show' : '')"  @click="hide"></view>	
		<!--上-->
		<view v-if="position=='top'" class="popup-content-top" :class="[customPopupClass, {'show-top':visible}]">
			<slot></slot>
		</view>
		<!--中-->	
		<view v-if="position=='middle'" class="popup-content-middle" :class="[customPopupClass, {'show-middle':visible}]">
			<slot></slot>
		</view>
		<!--下-->	
		<view v-if="position=='bottom'" class="popup-content-bottom" :class="[customPopupClass, {'show-bottom':visible}]">
			<slot></slot>
		</view>
		<!--左-->	
		<view v-if="position=='left'" class="popup-content-left" :class="[customPopupClass, {'show-left':visible}]">
			<slot></slot>
		</view>
		<!--右-->	
		<view v-if="position=='right'" class="popup-content-right" :class="[customPopupClass, {'show-right':visible}]">
			<slot></slot>
		</view>
	</view>
</template>

<script>
export default {
	name:'popups',
	 props: {
		position:{
			type: String,
			default:'' //top，middle，bottom，right，left
		},
		mask: {
			type: Boolean,
			default: false
    },
    can: {
      type: Boolean,
      default: true
    },
		visible: {
			type: Boolean,
			default: false
		},
		customPopupClass: {
			type: String,
			default: ''
		}
	},
	data() {
		return {
			duration:2000,
			icon:''
		}
	},
	onLoad(e) {
		// console.log(e+"=============")
	},
	created(e) {
		// console.log(e+"=============")
	},
	methods: {
		hide() { //显示头部
			this.$emit('update:visible', false)
		}
	},
	computed: {
		
	}
}
</script>

<style scoped="scoped" lang="scss">
.popup-mask {
  background: rgba(0, 0, 0, 0.25);
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 100;
  visibility: hide;
  opacity: 0;
}
.popup-mask.show {
  visibility: visible;
  opacity: 1;
}

.popup-content-top {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 40%;
  transition: all 0.3s ease;
  z-index: 1000;
  background: #fff;
  transform: translateY(-100%);
}
.popup-content-top.show-top {
  transform: translateY(0%);
}

.popup-content-middle {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 1000;
  background-color:#000;
  border-radius: 40rpx;
  width: 80%;
  height: 50%;
  display: none;
}
.popup-content-middle.show-middle {
  transform: translate(-50%, -50%);
  display: block;
}

.popup-content-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 48%;
  max-height: 48%;
  transition: all 0.3s ease;
  transform: translateY(100%);
  z-index: 1000;
  background-color:#000;
  border-radius: 40rpx 40rpx 0 0;
}
.popup-content-bottom.show-bottom {
  transform: translateY(0);
}

.popup-content-left {
  position: fixed;
  top: 0;
  left: 0;
  width: 80%;
  height: 100%;
  transition: all 0.3s ease;
  z-index: 1000;
  background: #fff;
  transform: translateX(-100%);
}
.popup-content-left.show-left {
  transform: translateX(0);
}

.popup-content-right {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 80%;
  height: 100%;
  transition: all 0.3s ease;
  transform: translateX(100%);
  z-index: 1000;
  background: #fff;
}
.popup-content-right.show-right {
  transform: translateX(0);
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
</style>

